<template>
    <div>
        <el-upload
                class="avatar-upload"
                :class="className"
                :action="config.uploadURL + '/upload/image'"
                :show-file-list="false"
                accept="image/*"
                :on-error="imgError"
                :on-success="imgSuccess">
            <div class="img-avatar" :class="className" v-if="imgUrl">
                <img :src="imgUrl" class="avatar" :class="className">
                <div class="big-show">
                    <div class="big-show-box">
                        <i @click.stop="modal = true"
                           class="el-icon-zoom-in avatar-upload-icon2"></i>
                        &nbsp;
                        <i @click.stop="reImg"
                           class="el-icon-delete avatar-upload-icon2"></i>
                    </div>
                </div>
            </div>
            <div v-else class="el-icon-plus avatar-upload-icon" :class="className"></div>
        </el-upload>
        <el-dialog :modal="false" :visible.sync="modal" width="60%">
            <img width="100%" :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import config from '@/utils/config'

    export default {
        props: {
            value: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'square'
            }
        },
        data() {
            return {
                config,
                modal: false
            }
        },
        computed: {
            imgUrl() {
                return this.value
            },
            className() {
                return this.type
            }
        },
        methods: {
            reImg() {
                this.emitInput('')
            },
            emitInput(val) {
                this.$emit('input', val)
            },
            imgSuccess(res) {
                if (res.code === 200) {
                    this.emitInput(res.data)
                } else {
                    this.imgError(res.msg)
                }
            },
            imgError(val) {
                this.$message.warning(val || '图片上传失败!')
            }
        }
    }
</script>

<style scoped>
    .square {
        width: 148px;
    }

    .rectangle {
        width: 100%;
    }

    .avatar-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        height: 148px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .avatar {
        height: 148px;
        display: block;
    }

    .avatar-upload:hover {
        border-color: #409EFF;
    }

    .avatar-upload-icon {
        font-size: 28px;
        color: #8c939d;
        height: 148px;
        line-height: 148px;
        text-align: center;
    }

    .avatar-upload-icon2 {
        font-size: 28px;
        color: #8c939d;
        text-align: center;
    }

    .img-avatar {
        position: relative;
        display: inline-block;
    }

    .img-avatar:hover .big-show {
        display: block;
        background: rgba(0, 0, 0, 0.5);
    }

    .img-avatar:hover .avatar-upload-icon2 {
        color: #fff;
    }

    .big-show {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .big-show-box {
        display: inline-block;
        margin-top: 60px;
    }

</style>
